<html>
    <head>
        <script type='text/javascript' src='js/jquery.js'></script>
        <link rel="stylesheet" type="text/css" href="stylesheets/main.css" />
        <style type="text/css">

div.avatar {
    background-image:url('image/face_avatars_full.png');
    background-position:0px 0px;
    background-repeat:no-repeat;
    display: block;
    padding: 3px;
    border: 0px;
}
div.lobby {
    background-image:url('image/planetbackground.png');
    background-repeat:no-repeat;
    height: 80%;
}

div.instructions {
    z-index: 5;
    padding: 20px;
    border: 1px;
    text-shadow: 2px 2px 2px #888888;
    position:absolute;
    left: 80px;
    margin-left: 40px;
    margin-right: 40px;
    height: 400px;
    width: 70%;
    top: -500px;
}

div.missionlist {
    z-index: 5;
    padding: 20px;
    border: 1px;
    border-style: solid;
    background-color: #000000;    
    text-shadow: 2px 2px 2px #888888;
    position:absolute;
    left: 80px;
    margin-left: 40px;
    margin-right: 40px;
    height: 400px;
    width: 70%;
    top: -500px;
}

div.intro {
     z-index: 5;
       background-image:url('image/scene_1.3.png');
       background-repeat:no-repeat;
       padding: 40px;
       border: 1px;
       border-style: solid;
       background-color: #000000;
       text-shadow: 2px 2px 2px #888888;
       position:absolute;
       left:80px;
       margin-left: 40px;
       margin-right: 40px;
       height: 400px;
       width: 70%;
       top: -500px;
       overflow: hidden;
}

div.introtextbox {
    padding: 0px;
    position: relative;
    border: 0px;
    width: 80%;
    height: 320px;
    overflow: hidden;
}

div.introtext {
    position: absolute;
    text-shadow: 2px 2px 2px #888888;
    top: 350px;
    overflow: hidden;
}

div.userlist {
    background-color: #102008;
    border: 1px;
    border-color: #A0A0A0;
    width: 260px;
    position: absolute;
    right: 4px;
}

div.selector {
    position:absolute;
    top: 80px;
    margin-left:10px;
}

div.selectoritem {
    border: 1px;
    padding: 4px;
    border-style: solid;
    position: relative;
    border-color: #A0A0A0;
    background-color: #304020;
    width: 600px;
    height: 80px;
    margin-left:20px;
    margin-bottom: 4px;
}

div.spacer {
    clear: both;
}

        </style>
    </head>
    <body>
    <script>
      var renderMode = {{ rendermode }};
      var selectedMission = 0;
      var initialize = function () {}
      var audioElement = document.createElement('audio');

      var runIntro = function () {
          audioElement.setAttribute('src', './snd/SolidStateLogic.mp3');
          audioElement.setAttribute('controls', '');
          setTimeout("audioElement.currentTime = 72",1000);
          audioElement.play();
          $("#intro").animate({top: "80px"}, 1000);
          $("#introtext").animate({top: "-1000px"}, 100000, function () {hideIntro()});
      }

      var hideIntro = function () {
          audioElement.pause();
          $("#intro").css({top: "-500px"});
          $("#introtext").css({top: "350px"});
      }

      var showMissions = function () {
          $("#missionlist").animate({top: "80px"}, 1000);
      }

      var selectMission = function (m, title) {
          $("#mission_title").html("<h3><b>Mission: </b>"+title+"</h3>");
          selectedMission = m;
      }      
      
      var hideMissions = function () {
          $("#missionlist").css({top: "-500px"});
      }
      
      var newGame = function () {
          window.location='entermission?renderMode='+parseInt(renderMode)+';mission='+parseInt(selectedMission)
      }
       
      setTimeout(initialize, 100);
    </script>



      <center><font size="24px">CoopyTrek</font></center>
        <div class="lobby"><center>Alpha version 2.1 - (c) dARKspace rEVElations</center></b>
          <div class="intro" id="intro">
            <div><b><center>THE STORY SO FAR....</center></b><br></div>
            <div class="introtextbox">
                <div class="introtext" id="introtext">
                    <div id="intro_1" style="position: relative; width: 50%; float: left; text-align:left">
                      <p>For five hundred years, humanity has lived in the
                      Dark Ages of spacefaring, but now it sees the New Renaissance. The humans restored their
                      space traveling abilies, building interstellar gates and reconnecting with their final
                      isolated colonies. And now, once again humans are establishing Starbases outside the Perimeter.</p>
                    </div>
                    <div class="spacer"><br><br><br><br></div>
                    <div id="intro_2" style="position: relative; width: 50%; float: right; text-align:right">
                      <p>The Reclusionists worry and raise hands in warning at the Congregations, but for the new
                      commanders the Pruning is a vague memory at best. Surely noone in the galaxy is interested
                      in this backward race, they argue. The Reclusionists shake their heads in disbelief.
                      Who knows what species are still watching them from beyond the Veil?
                      </p>
                    </div>
                    <div class="spacer"><br><br><br><br></div>
                    <div id="intro_3" style="width: 50%; float: left; text-align:left;">
                      <p>But under the new established Federated REnascent Human Space-faring territories
                      command (FREHS), the larger part of the territories set out to conquer the galaxy.
                      Already 15 new Starbases have been constructed beyond the perimeter and FREHS command
                      is increasing their logistics operations. Not far now, before humans venture into
                      zones designated to other species in the Pruning...
                      </p>
                    </div>
                </div>
            </div>
            <div><br><div class="button orange" style="width: 100px; margin: auto; text-align:center;" onClick="javascript:hideIntro();">Close</div></div>
          </div>
          <div class="instructions"><b><center>INSTRUCTIONS</center></b>
            <div class="avatar" style="height: 74px; width: 74px; float: left; background-position : -{{ avatarx }}px -{{avatary }}px"></div>
            Commander {{ commander }},</p>
            <p>U bent benoemd tot commandant van de USS Enterprise. Uw missie luidt: de exploratie
            van de oneindige leegten waar geen mens eerder is geweest.
            Uw taak is vreemde levensvormen op te sporen en vreedzaam tegemoet te treden door hen
            aan te bieden deel uit te maken van de verenigde federatie van planeten</p>
            <p>De zgn. Klingons zijn de Federatie echter vijandig gezind. Zij zullen U proberen te
            vernietigen. Het is niet altijd mogelijk ze te ontvluchten, omdat ze U zullen trachten
            te achtervolgen. Het behoort tot uw taak de Klingons onschadelijk te maken. </p>
            <p>U heeft de beschikking over Federatie Starbases, waar U de Enterprise kunt laten
            repareren en bevoorraden. Deze bases kunnen echter door de Klingons worden vernietigd.
            Een Starbase is van groot strategisch belang. U moet een base tegen klingons
            beschermen, zelfs als dit het verlies van Uw schip en bemanning kan betekenen.</p>
          </div>
          <div class="userlist"><b>Join users in game</b>
          {% for player in players %}
            <div class="spacer" style="height: 1px; background-color: #50A040;"></div>
            <div class="avatar" style="float: left; height: 74px; width : 74px; background-position : -{{ player.avatarx }}px -{{ player.avatary }}px"></div><div class="button orange" style="float: left; width: 60px; margin:auto" onClick="javascript:window.location='entermission?g={{player.ingame}};renderMode='+parseInt(renderMode);">Join</div>
            <div style="height: 74px; float: left;">{{player.rank}} {{player.commander}}<br>Game: {{player.ingame_name}}</div>
           {% endfor %}
          </div>
        </div> // lobby
        <div id="missionlist" class="missionlist">
          {% for mission in missions %}
			<div id="m_{{ mission.name }}" class="selectoritem">
				<div style="position: static; width: 500px;"><h3><b>Mission: </b>{{ mission.title }}</h3>{{ mission.description }}</div>
				<div style="position: absolute; width: 80px; height: 20px; right: 4px; top:40%;">
					<div class="button orange" onClick="javascript:selectMission({{mission.number}},'{{mission.title}}');hideMissions();">Select</div>
				</div>
			</div>
          {% endfor %}
          <div><br><div class="button orange" style="width: 100px; margin: auto; text-align:center;" onClick="javascript:hideMissions();">Cancel</div></div>  
        </div>
        <div class="selector" style="position:absolute; height: 400px">
           <div id="ship_selector" class="selectoritem">
             <div style="position: absolute"><h2><b>Ship: </b>Enterprise</h2></div>
             <div style="position: absolute; width: 120px; height: 20px; right: 4px; top:40%;">
                <div class="button orange">Change ship</div>
             </div>
           </div>
           <div id="mission_selector" class="selectoritem">
             <div id="mission_title" style="float: left;"><h3><b>Mission: </b>[choose a mission]</h3></div>
             <div style="position: absolute; width: 120px; height: 20px; right: 4px; top:40%;">
               <div class="button orange" onClick="javascript:showMissions();">Change mission</div>
             </div>
           </div>
           <div id="render_selector" class="selectoritem">
             <div style="float: left;"><h2><b>Graphics:</b></div>
             <div style="float: right; width: 360px; right: 4px; height: 20px; top:40%;">
               <div class="button orange" style="position: relative; float:left; width: 100px; text-align: center; margin-right:10px;" onClick="javascript:renderMode=0;">2D sprites</div>
               <div class="button orange" style="position: relative; float:left; width: 100px; text-align: center; margin-right:10px;" onClick="javascript:renderMode=1;">3D low</div>
               <div class="button orange" style="position: relative; float:left; width: 100px; text-align: center; margin-right:10px;" onClick="javascript:renderMode=2;">3D high</div>
             </div>
           </div>
           <div id="new_game" class="selectoritem">
              <div style="position:absolute; margin-left: -150px; left:50%; height: 20px; top:40%;">
               <div class="button orange" style="position: relative; float:left; width: 100px; margin-right:10px" onClick="javascript:newGame();">Start game</div>
               <div class="button orange" style="position: relative; float:left; width: 100px; margin-right:10px" onClick="javascript:runIntro();">Introduction</div>
               <div class="button orange" style="position: relative; float:left; width: 100px; margin-right:10px" onClick="javascript:runIntro();">Instructions</div>
              </div>
           <div>
        </div>
  </body>
</html>